<template>
  <div class="swiper">
    <div class="block">
      <el-carousel trigger="click" height="464px" arrow="always">
        <el-carousel-item v-for="item in url" :key="item">
          <img :src="item" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import { getPicture } from "../../../services/swiper.js";

export default {
  created() {
    this.getSwiperPic();
  },
  data() {
    return {
      url: [],
    };
  },
  methods: {
    async getSwiperPic() {
      const res = await getPicture({
        project_id: "132",
        site_id: "169"
      });
      res.data.result.forEach((item) => {
        this.url.push(item.s_photos[0].path);
      });
    },
  },
};
</script>

<style lang="scss" >
.swiper {
  width: 100%;
  .block {
    .el-carousel {
       .el-carousel__item {
          width: 100%;
          height: 460px;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        }
      .el-carousel__arrow {
        width: 36px;
        height: 60px;
        border-radius: 5px;
        font-size: 26px;
        background-color: rgba(128, 128, 128, 0.8);
        &:hover {
          background-color: #ccaa7c;
        }
      }
      .el-carousel__arrow--left {
        left: 363px;
      }
      .el-carousel__arrow--right {
        right: 160px;
      }
    }
  }
}
</style>
